<template>
	<view style="display: flex;flex-direction: column;align-items: center;width: 100%;" >
		<view v-for="(item,index) in listObj.list" :key="index" class="itemContainer" @click="gotoDetail(item)">
			<view class="item">
				<view class="left">
					选择类型
				</view>
				<view class="middle" style="color: #197fff;">
					{{ loanTypeList[item.type].name }}
				</view>
				<view class="right" style="color: #197fff;">
					详情 >
				</view>		
			</view>
			<view class="item">
				<view class="left">
					计算方式
				</view>
				<view class="middle" >
					{{Number(item.form.calculationTypeIndex==0?item.form.totalPrice:item.form.amount).toFixed(2) }}万元
					（{{calculationTypeList[item.form.calculationTypeIndex].name }})
				</view>
	
			</view>
			<template v-if="item.form.calculationTypeIndex==0">
				<view class="item">
					<view class="left">
						首付
					</view>
					<view class="middle" >
						{{(percentList[item.form.percentIndex].value*item.form.totalPrice).toFixed(2)}}万元
						（{{percentList[item.form.percentIndex].name}})
					</view>					
				</view>
			</template>
			<template v-if="item.form.calculationTypeIndex==1">
				<view class="item">
					<view class="left">
						贷款总额
					</view>
					<view class="middle" >
						{{Number(item.form.amount).toFixed(2)}}万元 
					</view>					
				</view>
			</template>
			<view class="item">
				<view class="left">
					贷款年限
				</view>
				<view class="middle" >
					{{yearArray[item.form.yearIndex].name}}
				</view>					
			</view>
			<view class="line">
				
			</view>
			<view class="time">
				<view class="icon">
					
				</view>
				创建时间：
				<view class="content">
					{{item.createTime}}
				</view>
			</view>
		</view>
		<u-empty v-if="listObj.list.length==0" style="padding-top: 300rpx" text="暂无记录"
			:width="'400rpx'"
			icon="/static/image/icon_empty_list.png"
			textSize="28rpx"
			mode="data"></u-empty>
	</view>
</template>

<script>
	let that = null
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")
	import defaultList from '@/static/js/calculatorDefaultList.js'
	
	export default {
		components: {},
		data() {
			return {	
				loanTypeList: defaultList.loanTypeList,
				calculationTypeList: defaultList.calculationTypeList,
				
				//首付比例
				percentList: defaultList.percentList,
				// 利率表
				rateList: defaultList.rateListProvident,
				
				yearArray: defaultList.yearList,
				
				listObj: {
					list: [{
						type: 1,
						createTime: "2019-12-33 11:12:13",
						form:{
							calculationTypeIndex: 1,
							totalPrice: 200,
							amount: 140,
							percentIndex: "2",
							yearIndex: '29'
						}
					}],
					loadStatus: "loading",
					pageIndex: 1,
					curPageIndex: 0,
				},
			}
		},
        props: {
            id: {
                type: String,
				default: ""
            },
        },
		watch: {
		    id: {
		        handler: function observer(val) {
		            this.clearListShow(this.listObj)
		            this.getRecorldList()
		        },
		        immediate: true,
				deep: true
		    }
		},
		created() {
			that = this
		},
		mounted() {
			
		},
		onReachBottom() {
			console.log("list onReachBottom")
		},
		methods: {
			onReachBottom() {
				that.getRecorldList()
			},
			
			gotoDetail(item){
				console.log("gotoDetail",item, item.id)
				uni.navigateTo({
					url: '/pages/calculator/record/detail?id=' + item.id
				})
			},
			getRecorldList() {
				let that = this
				if (that.listObj.curPageIndex != that.listObj.pageIndex) {
					that.listObj.curPageIndex = that.listObj.pageIndex
					uni.showLoading({
						title: "加载中..."
					})
					api.getCalculatorList({
						param: {
							userId: that.id,
							limit: 10,
							page: that.listObj.pageIndex,
						}
					}).then(res => {
						console.log(res)
						if (res.code == 0) {
							that.pushListShow(that.listObj, res.data)
							console.log(that.listObj)
						}
					}).finally(t=>{
						uni.hideLoading()
					})
				}
			
			},
			
			
			/**
			 * @description: 列表中添加数据
			 * @param {number} id   u-tabs-swiper的当前ID
			 * @param {list}  列表
			 * @return void
			 */
			pushListShow(srcObj, pushlist) {
				if (pushlist && pushlist.length > 0) {
					for (let i = 0; i < pushlist.length; i++) {
						var data = JSON.parse(pushlist[i].data)
						pushlist[i].form = data.form
						pushlist[i].type = data.type
						pushlist[i].param = data
						srcObj.list.push(pushlist[i])
					}
					srcObj.pageIndex++;
			
					if (pushlist.length == 10) {
						srcObj.loadStatus = "loadmore"
					} else {
						srcObj.loadStatus = "nomore"
					}
				} else {
					srcObj.loadStatus = "nomore"
				}
			},
			
			//----清空列表
			clearListShow(srcObj) {
				srcObj.curPageIndex = 0;
				srcObj.pageIndex = 1;
				srcObj.list.splice(0, srcObj.list.length)
			},
	
		
		}
	}
</script>
<style>
	page{
		background-color: #f8f8f8;
	}

</style>

<style lang="scss" scoped>

	.itemContainer{
		width: 714rpx;
		padding: 20rpx 30rpx 0 30rpx;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		.item{
			width: 100%;
			height: 50rpx;
			display: flex;
			align-items: center;
			color: #222;
			line-height: 50rpx;
			font-size: 24rpx;
			.left{
				width: 130rpx;
				color: #888;
			}
			.middle{
				width: 400rpx;
			}
			.right{
				margin-left: 30rpx;
			}
		}
		.line{
			height: 1px;
			width: 100%;
			background-color: #f0f0f0;
			margin-top: 15rpx;
		}
		.time{
			width: 100%;
			display: flex;
			align-items: center;
			color: #888;
			font-size: 20rpx;
			height: 80rpx;
			line-height: 80rpx;
			.icon{
				width: 22rpx;
				height: 22rpx;
				margin-right: 10rpx;
				background-image: url(@/static/image/icon_time.png);
			}
			.content{
				color: #222;
			}
		}
	}
</style>